<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css3鼠标悬停图片动画特效库Izmir|DEMO2_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
	<link rel="stylesheet" href="assets/css/just-the-docs.css">
    <link rel="stylesheet" href="assets/css/izmir.css">
    <link rel="stylesheet" href="assets/css/docs.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/fa-solid.min.css">
    <style>
    	.page-content{
    		width: 900px;
    		margin: 0 auto;
    	}
    </style>
</head>
<body>


<h3 id="image-classes">Image Classes</h3>

<div class="col-3">
  <div class="col-item">
    <figure class="c4-izmir c4-image-zoom-in" tabindex="0">
      <img src="assets/images/image11.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-image-zoom-in</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-image-zoom-out" tabindex="0">
      <img src="assets/images/image11.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-image-zoom-out</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-image-pan-up" tabindex="0">
      <img src="assets/images/image11.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-image-pan-up</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-image-pan-down" tabindex="0">
      <img src="assets/images/image11.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-image-pan-down</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-image-pan-left" tabindex="0">
      <img src="assets/images/image11.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-image-pan-left</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-image-pan-right" tabindex="0">
      <img src="assets/images/image11.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-image-pan-right</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-image-rotate-left" tabindex="0">
      <img src="assets/images/image11.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-image-rotate-left</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-image-rotate-right" tabindex="0">
      <img src="assets/images/image11.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-image-rotate-right</textarea>
  </div>
  <div class="col-item">
    <figure class="c4-izmir c4-image-blur" tabindex="0">
      <img src="assets/images/image11.jpg" alt="Sample Image" />
      <figcaption>
      </figcaption>
    </figure>
    <textarea onclick="this.focus();this.select()" readonly="readonly">c4-image-blur</textarea>
  </div>
</div>



</body>
</html>